<template>
  <div class="shop-management-container">
    <el-card class="shop-management-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">店铺管理</span>
          <div class="header-actions">
            <el-button
                type="primary"
                @click="fetchShops"
                :icon="Refresh"
                :loading="loading"
            >
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <div class="table-container">
        <el-table
            :data="paginatedShops"
            border
            style="width: 100%"
            v-loading="loading"
            stripe
            highlight-current-row
            :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
            :row-class-name="tableRowClassName"
        >
          <el-table-column label="序号" width="80" align="center">
            <template #default="{ $index }">
              {{ (currentPage - 1) * pageSize + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="店铺名称" width="180" align="center" />
          <el-table-column prop="address" label="店铺地址" width="220" align="center">
            <template #default="{row}">
              <el-tooltip effect="dark" :content="row.address" placement="top">
                <span>{{ row.address }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="contactPhone" label="联系电话" width="150" align="center" />
          <el-table-column prop="shopAvatar" label="店铺头像" width="120" align="center">
            <template #default="{row}">
              <el-image
                  v-if="row.shopAvatar"
                  :src="row.shopAvatar"
                  :preview-src-list="[row.shopAvatar]"
                  fit="cover"
                  style="width: 50px; height: 50px; border-radius: 4px;"
                  :hide-on-click-modal="true"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120" align="center">
            <template #default="{ row }">
              <el-tag
                  :type="getStatusTagType(row.status)"
                  :effect="getStatusEffect(row.status)"
                  size="small"
              >
                {{ formatStatus(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
            <template #default="{row}">
              {{ formatDate(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180" align="center">
            <template #default="{row}">
              {{ row.updateTime ? formatDate(row.updateTime) : '-' }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="shopList.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue'
import axios from 'axios'
import {ElMessage} from 'element-plus'
import {Refresh, Picture} from '@element-plus/icons-vue'

const shopList = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const disabled = ref(false)
const background = ref(true)

// 状态映射配置
const statusConfig = {
  0: {
    text: '待审核',
    type: 'warning',
    effect: 'dark'
  },
  1: {
    text: '正常',
    type: 'success',
    effect: 'light'
  },
  2: {
    text: '审核未通过',
    type: 'danger',
    effect: 'dark'
  }
}

// 格式化状态文本
const formatStatus = (status) => {
  return statusConfig[status]?.text || '未知状态'
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  return statusConfig[status]?.type || 'info'
}

// 获取状态标签效果
const getStatusEffect = (status) => {
  return statusConfig[status]?.effect || 'light'
}

const paginatedShops = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return shopList.value.slice(start, end)
})

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

const fetchShops = async () => {
  try {
    loading.value = true
    const response = await axios.get(`${BASE_URL}/api/v1/admin/selStore`)
    shopList.value = response.data.data.map(shop => ({
      ...shop,
      createTime: formatDate(shop.createTime),
      updateTime: shop.updateTime ? formatDate(shop.updateTime) : null
    }))
  } catch (error) {
    console.error('获取店铺列表失败:', error)
    ElMessage.error('获取店铺列表失败')
  } finally {
    loading.value = false
  }
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

const tableRowClassName = ({rowIndex}) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
}

onMounted(() => {
  fetchShops()
})
</script>

<style scoped>
.shop-management-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.shop-management-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.table-container {
  margin-top: 10px;
  padding: 0 10px;
}

.el-table {
  font-size: 14px;
}

.el-table :deep(.el-table__cell) {
  padding: 12px 0;
}

/* 自定义行样式 */
:deep(.el-table .even-row) {
  background-color: #fafafa;
}

:deep(.el-table .odd-row) {
  background-color: #ffffff;
}

/* 标签样式增强 */
:deep(.el-tag) {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #909399;
  font-size: 24px;
}
</style>